<template>
	<div id="tmpl">
		<!-- 图片分类 -->
		<div id="cate">
			<ul v-bind="{style:'width:'+ulWidth+'px'}">
				<li @click='getimgs(0)'>全部</li>
				<li v-for='(item,index) in cates' :key='index' @click='getimgs(item.id)'>{{item.title}}</li>
			</ul>
		</div>
		<!-- 图片列表 -->
		<div id="imglist">
			<ul>
			  <li v-for="item in list">
			    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
			    	<img v-lazy="item.img_url">
				    <div id="desc">
				    	<h5 v-text='item.title'></h5>
				    	<p v-text='item.zhaiyao'></p>
				    </div>
			    </router-link>
			  </li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				cates:[],
				ulWidth:320, //ul标签的宽度
				list:[]
			}
		},
		created(){
			//获取图片分类数据
			this.getcates();
			//获取图片数据
			var all = 0; //获取所有图片数据
			this.getimgs(all);
		},
		methods:{
			getcates:function(){
				var url = this.common.apidomain+'/api/getimgcategory';
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						this.common.Toast(res.body.message);
						return;
					}
					this.cates = res.body.message;
					//计算ul标签的宽度
					var liw = 62; //每个li标签的宽度
					this.ulWidth = (res.body.message.length+1) * liw;
				});
			},
			getimgs:function(cateid){
				//如果参数cateid没有传参，则默认为0，即获取所有图片数据
				cateid = cateid || 0;
				var url = this.common.apidomain+'/api/getimages/'+cateid;
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						this.common.Toast(res.body.message);
						return;
					}
					this.list = res.body.message;
				});
			}
		}
	}
</script>

<style scoped>
	/*1.0 图片分类*/
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}
	/*2.0 实现图片列表样式*/
	#imglist ul {
		padding-left: 0px;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}
	image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

    #desc h5{
        color: #ffffff;
        font-weight: bold;
    }
    #desc p{
        color:#fff;
    }
</style>